<template>
  <el-container class="wrapper">
    <transition name="fade">
      <div v-if="$store.getters.getSignStatus" class="global-sign">
        <div class="sign-mask-layer" @click="hideSign" @keydown.13="hideSign" />
        <Sign />
      </div>
    </transition>
    <NavMenu />
    <el-header :height="height" :style="pageBgImg">
      <slot name="header" />
    </el-header>
    <el-container class="content">
      <el-main>
        <slot name="main" />
      </el-main>
      <el-aside width="25%">
        <slot name="aside" />
      </el-aside>
    </el-container>
    <el-footer height="1.35rem" :style="pageBgImg">
      <p>©2018 - 2020 By JerryC</p>
      <p>Power by Zero|Theme Colorful</p>
    </el-footer>
    <el-backtop>
      <i class="el-icon-third-back-top" />
    </el-backtop>
  </el-container>
</template>

<script>
import Sign from "$views/sign/Sign";
import NavMenu from "./NavMenu";
export default {
  name: "Wapper",
  components: {
    Sign,
    NavMenu,
  },
  props: {
    height: {
      type: String,
      default: "4rem",
    },
    bgImg: String,
  },
  data() {
    return {
      pageBgImg: { "background-image": "url('" + this.bgImg + "')" },
    };
  },
  methods: {
    hideSign() {
      this.$store.commit("setSignStatus", false);
    },
  },
};
</script>

<style lang="stylus" scoped>
.global-sign {
  z-index: 2021;
}

.sign-mask-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.el-header {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: fade-in-down 1s;
  animation: fade-in-down 1s both;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.el-header >>> .other-title {
  color: #fff;
  font-size: 0.4rem;
  font-family: 'Playball', cursive;
}

.content {
  max-width: 12rem;
  margin: 0 auto;
  padding: 0.2rem;
  -webkit-animation: fade-in-up 1s;
  animation: fade-in-up 1s both;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.el-main {
  width: 75%;
  padding: 0 0.2rem 0 0;
}

.el-main, .el-aside {
  overflow: unset;
}

.el-main >>> .el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 0.2rem;
}

.el-footer {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-position: bottom !important;
}

.el-footer * {
  padding: 0.1rem 0;
}
</style>